{% extends "learning/base.html" %}

{% block title %}我的错题本{% endblock %}

{% block content %}
<!-- Page Header -->
<div style="margin-bottom:2rem;">
    <div style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.5rem;">
        <div>
            <h2 style="margin:0 0 0.5rem 0;font-size:2.25rem;font-weight:800;letter-spacing:-0.02em;">
                我的错题本
            </h2>
            <p style="margin:0;color:var(--text-secondary);font-size:1rem;">
                {{ page_subtitle }}
            </p>
        </div>
        {% if user.is_student %}
            <a class="button" href="{% url 'learning:mistake_create' %}" style="padding:0.75rem 1.5rem;">
                <span style="font-size:1.25rem;line-height:1;">➕</span>
                记录新错题
            </a>
        {% endif %}
    </div>

    <!-- Statistics Dashboard -->
    <div class="dashboard-grid">
        <div class="stat-card">
            <div class="stat-label">累计错题总数</div>
            <div class="stat-value" style="color:var(--accent);">{{ total_count }}</div>
            <div class="progress-bar" style="margin-top:0.75rem;">
                <span style="width:100%;"></span>
            </div>
            <div class="stat-description" style="margin-top:0.5rem;">已完成率 {{ resolved_percent }}%</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">已提交批阅</div>
            <div class="stat-value" style="color:var(--warning);">{{ submitted_count }}</div>
            <div class="progress-bar" style="margin-top:0.75rem;">
                <span style="width:{{ submitted_percent }}%;background:linear-gradient(90deg,var(--warning-600),var(--warning-500));"></span>
            </div>
            <div class="stat-description" style="margin-top:0.5rem;">等待老师批阅 {{ submitted_percent }}%</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">{{ scope_label }}</div>
            <div class="stat-value" style="color:var(--success);">{{ scope_value }}</div>
            <div class="progress-bar" style="margin-top:0.75rem;">
                <span style="width:{{ scope_percent }}%;background:linear-gradient(90deg,var(--success-600),var(--success-500));"></span>
            </div>
            <div class="stat-description" style="margin-top:0.5rem;">
                {% if user.is_student %}近 7 天保持记录{% else %}正在辅导的学生{% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Mistake List -->
<section class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap;">
        <div>
            <h3 style="margin:0 0 0.25rem 0;">错题记录</h3>
            <p style="margin:0;color:var(--text-secondary);font-size:0.9375rem;">
                按更新时间排序，最新的记录显示在前
            </p>
        </div>
        <div class="action-group">
            <span class="pill warning">草稿 {{ draft_count }}</span>
            <span class="pill">已提交 {{ submitted_count }}</span>
            <span class="pill success">已解决 {{ resolved_count }}</span>
            {% if user.is_student and archived_count %}
                <span class="pill">📦 已归档 {{ archived_count }}</span>
            {% endif %}
        </div>
    </div>

    {% if mistakes %}
        <div class="mistake-feed">
            {% for mistake in mistakes %}
                <article class="feed-item">
                    <div class="feed-header">
                        <h4 class="feed-title">{{ mistake.title }}</h4>
                        <span class="feed-status {{ mistake.status }}">
                            {{ mistake.get_status_display }}
                        </span>
                    </div>
                    <div class="feed-meta">
                        <span>🕐 {{ mistake.updated_at|date:"Y-m-d H:i" }}</span>
                        {% if user.is_teacher %}
                            <span>👤 {{ mistake.student.username }}</span>
                        {% else %}
                            <span>
                                👨‍🏫 {% if mistake.assigned_teacher %}{{ mistake.assigned_teacher.username }}{% else %}暂无指导老师{% endif %}
                            </span>
                        {% endif %}
                    </div>
                    <p style="margin:0.5rem 0 0;color:var(--text-secondary);font-size:0.9375rem;line-height:1.6;">
                        {{ mistake.question|truncatechars:120 }}
                    </p>
                    <div class="action-group" style="margin-top:0.75rem;">
                        <a class="button small secondary" href="{{ mistake.get_absolute_url }}">查看详情</a>
                        {% if user.is_student %}
                            {% if mistake.status == mistake.Status.DRAFT %}
                                <form class="inline-form" method="post" action="{% url 'learning:mistake_submit' mistake.pk %}">
                                    {% csrf_token %}
                                    <button type="submit" class="button small">提交批阅</button>
                                </form>
                                <form class="inline-form" method="post" action="{% url 'learning:mistake_delete' mistake.pk %}" onsubmit="return confirm('确认删除这条草稿吗？此操作不可恢复。');">
                                    {% csrf_token %}
                                    <input type="hidden" name="next" value="{{ request.get_full_path }}">
                                    <button type="submit" class="button small danger">删除</button>
                                </form>
                            {% elif mistake.status == mistake.Status.SUBMITTED %}
                                <span class="pill">⏳ 等待老师批阅</span>
                            {% else %}
                                <span class="pill success">✓ 老师已反馈</span>
                                <form class="inline-form" method="post" action="{% url 'learning:mistake_archive' mistake.pk %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="next" value="{{ request.get_full_path }}">
                                    <button type="submit" class="button small secondary">归档</button>
                                </form>
                            {% endif %}
                        {% else %}
                            {% if mistake.status == mistake.Status.SUBMITTED %}
                                <a class="button small" href="{{ mistake.get_absolute_url }}#teacher-feedback">立即批阅</a>
                            {% elif mistake.status == mistake.Status.RESOLVED %}
                                <span class="pill success">✓ 已批阅</span>
                            {% else %}
                                <span class="pill warning">等待学生提交</span>
                            {% endif %}
                        {% endif %}
                    </div>
                </article>
            {% endfor %}
        </div>
    {% else %}
        <div style="text-align:center;padding:3rem 1rem;">
            <div style="font-size:4rem;margin-bottom:1rem;opacity:0.3;">📝</div>
            <p style="margin:0 0 1.5rem 0;color:var(--text-secondary);font-size:1.0625rem;">
                暂时还没有错题记录
            </p>
            {% if user.is_student %}
                <a class="button" href="{% url 'learning:mistake_create' %}">记录第一个错题</a>
            {% endif %}
        </div>
    {% endif %}
</section>

{% if recent_activity %}
<section class="card">
    <h3 style="margin:0 0 1rem 0;">最近动态</h3>
    <div style="display:grid;gap:0.75rem;">
        {% for item in recent_activity %}
            <div style="display:flex;align-items:center;gap:1rem;padding:0.875rem 1rem;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border-subtle);">
                <span class="feed-status {{ item.status }}" style="flex-shrink:0;">{{ item.get_status_display }}</span>
                <span style="flex:1;font-weight:500;">{{ item.title }}</span>
                <small style="color:var(--text-tertiary);white-space:nowrap;">{{ item.updated_at|timesince }}前</small>
            </div>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if user.is_student and archived_mistakes %}
<section class="card" id="archived-mistakes">
    <button id="toggle-archived" class="button small secondary" type="button"
        style="display:flex;align-items:center;gap:0.5rem;justify-content:space-between;width:100%;padding:0.75rem 1rem;">
        <span style="display:flex;align-items:center;gap:0.5rem;">
            <span id="toggle-icon" aria-hidden="true">▼</span>
            归档错题（{{ archived_count }}）
        </span>
        <span style="font-size:0.875rem;color:var(--text-tertiary);">点击展开 / 收起</span>
    </button>
    <div id="archived-container" class="mistake-feed" style="margin-top:1rem;">
        {% for mistake in archived_mistakes %}
            <article class="feed-item">
                <div class="feed-header">
                    <h4 class="feed-title">{{ mistake.title }}</h4>
                    <span class="feed-status {{ mistake.status }}">
                        {{ mistake.get_status_display }}
                    </span>
                </div>
                <div class="feed-meta">
                    <span>📦 归档于 {{ mistake.archived_at|date:"Y-m-d H:i" }}</span>
                    <span>🕐 最近更新 {{ mistake.updated_at|date:"Y-m-d H:i" }}</span>
                </div>
                <p style="margin:0.5rem 0 0;color:var(--text-secondary);font-size:0.9375rem;line-height:1.6;">
                    {{ mistake.question|truncatechars:120 }}
                </p>
                <div class="action-group" style="margin-top:0.75rem;">
                    <a class="button small secondary" href="{{ mistake.get_absolute_url }}">查看详情</a>
                    <form class="inline-form" method="post" action="{% url 'learning:mistake_restore' mistake.pk %}">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{{ request.get_full_path }}">
                        <button type="submit" class="button small">恢复显示</button>
                    </form>
                </div>
            </article>
        {% endfor %}
    </div>
</section>
<script>
    (function () {
        const toggle = document.getElementById("toggle-archived");
        const container = document.getElementById("archived-container");
        const icon = document.getElementById("toggle-icon");
        if (!toggle || !container || !icon) return;

        let collapsed = false;
        const updateState = () => {
            container.style.display = collapsed ? "none" : "grid";
            icon.textContent = collapsed ? "▲" : "▼";
        };

        toggle.addEventListener("click", () => {
            collapsed = !collapsed;
            updateState();
        });

        collapsed = true;
        updateState();
    })();
</script>
{% endif %}
{% endblock %}
